#162 Tree Based Navigation

May 18, 2009 | 11 minutes | Active Record, Plugins

The acts_as_tree plugin provides many methods for handling a tree based association. In this episode I show how to build a navigation system with tabs, subpages, and breadcrumbs.

Click to Play Video ▶

Download:
source codeProject Files in Zip (111 KB)
mp4Full Size H.264 Video (15.5 MB)
m4vSmaller H.264 Video (11 MB)
webmFull Size VP8 Video (27.5 MB)
ogvFull Size Theora Video (21.3 MB)

Browse Source Code

There is a newer version of this episode, see the revised episode.

Episodes

          bash
        
rails navigator
script/plugin install git://github.com/rails/acts_as_tree.git
script/generate nifty_layout
script/generate nifty_scaffold page parent_id:integer name:string content:text

          models/page.rb
        
acts_as_tree

          pages/_form.html.erb
        
<%= f.collection_select :parent_id, Page.all(:order => "name"), :id, :name, :include_blank => true %>

          layouts/application.html.erb
        
<ul id="menu">
  <% for page in Page.roots %>
    <li><%= link_to h(page.name), page %></li>
  <% end %>
</ul>
<div class="clear"></div>

          pages/show.html.erb
        
<% title @page.name, false %>

<% unless @page.children.empty? %>
<ul id="submenu">
  <% for page in @page.children %>
    <li><%= link_to h(page.name), page %></li>
  <% end %>
</ul>
<% end %>

<p>
<% for page in @page.ancestors.reverse %>
  <%= link_to h(page.name), page %> &gt;
<% end %>
</p>

<h1><%=h @page.name %></h1>

<%= simple_format @page.content %>

          css
        
#menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu li {
  margin: 0;
  padding: 0;
  float: left;
}

#menu li a {
  display: block;
  padding: 4px 8px;
  text-decoration: none;
  border: solid black 1px;
  color: black;
  background-color: #AEBBE2;
}

#menu li a:hover {
  color: white;
  background-color: #4A63B8;
}

#submenu {
  float: left;
  list-style: none;
  border: solid black 1px;
  padding: 15px 14px;
  margin: 24px 0;
  margin-bottom: 50px;
  margin-right: 20px;
}